<template>
<div>
  <el-form :inline="true"  class="demo-form-inline">
    <el-form-item label="筛选查询">
    </el-form-item>
    <el-form-item label="  登记时间">
      <el-date-picker
          v-model="allBugInfosParam.startTime"
          type="datetime"
          placeholder="选择开始日期时间">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="~">
      <el-date-picker
          v-model="allBugInfosParam.endTime"
          type="datetime"
          placeholder="选择结束日期时间">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="项目">
      <el-select v-model="allBugInfosParam.projectId"  placeholder="项目名称">
        <el-option  v-for="project in projects"  :key="project.projectId" :label="project.projectName" :value="project.projectId"  ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click.prevent="getData">查询</el-button>
    </el-form-item>
  </el-form>


  <div id="myChart" :style="{width: '600px', height: '600px'}"></div>
</div>
</template>

<script>
export default {
  name: "bugTypeCount",
  data(){
    return{
      allBugInfosParam:{
        startTime:null,
        endTime:null,
        projectId:null
      },
      datas:[],
      projects:[],
    }
  },
  created() {
    this.getData();
    this.getProject()
  },

  methods: {
    getProject(){
      this.$http.post("/project/findAllProject").then((resp) => {
        this.projects = resp.data.data;
        console.log(resp.data.data)
      })
    },
    getData(){
      this.$http.post("/bugInfo/bugTypeCount", this.allBugInfosParam).then((resp) => {
        this.datas = resp.data.data.statistics;
        this.drawLine()
      })
    },
    drawLine() {
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      console.log(this.datas)

      myChart.setOption({
        title: {
          text: '缺陷类别统计',
          subtext: '数量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '没有数据',
            type: 'pie',
            radius: '50%',
            data: this.datas,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]


      })

    }

  }
}





</script>

<style scoped>

</style>